<style lang="scss">
.key-listen-input {
  &:focus-visible {
    outline: none;
  }
  &__inner  {
    min-width: 100px;
  }
}
</style>

<template>
  <zw-layout row class="key-listen-input" tabindex="0" @keydown="onKeyUp">
    <div class="key-listen-input__inner">{{arr.join('+')}} &nbsp;</div> <div><i @click="clearArr" class="el-icon-circle-close"></i></div>
  </zw-layout>
</template>

<script>
export default {
  name: 'KeyListenInput',
  props: {
    value: null,
  },
  data() {
    return {
      lastTimeStamp: 0,
      arr: []
    }
  },
  methods: {
    onKeyUp(e) {
      // console.log('e', e)
      if ( this.lastTimeStamp > 0) {
        if (e.timeStamp -  this.lastTimeStamp > 150) {
          this.lastTimeStamp = 0;
          this.arr.push(e.key)
          return;
        }
      }
      this.arr.push(e.key)
      this.lastTimeStamp = e.timeStamp
    },
    clearArr() {
      this.arr.splice(this.arr.length - 1, 1)
    }
  }
}
</script>
